<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import AOS from 'aos';
import 'aos/dist/aos.css';

onMounted(() => {
    AOS.init({
        duration: 1000,
        offset: 100,
        once: true,
        easing: 'ease-in-out'
    });
});

// 常见问题
const faqs = [
    {
        question: 'GuaClass系统支持哪些贷款类型？',
        answer: 'GuaClass系统支持多种贷款类型，包括房贷、车贷、企业贷款、个人消费贷款等。系统设计灵活，可以根据您的业务需求进行配置。',
        icon: 'mdi-home-currency-usd'
    },
    {
        question: '如何添加新的经纪人和会计师？',
        answer: '管理员可以在系统的"用户管理"模块轻松添加新的经纪人和会计师。提供基本信息和权限设置后，系统将自动发送邀请邮件给新用户。',
        icon: 'mdi-account-plus'
    },
    {
        question: '佣金如何计算和分配？',
        answer: 'GuaClass系统提供灵活的佣金计算规则配置，可以基于贷款金额、贷款类型等因素设定不同的佣金比例。系统会根据预设规则自动计算经纪人和会计师的佣金，并生成佣金报表。',
        icon: 'mdi-calculator'
    },
    {
        question: '客户数据是否安全？',
        answer: 'GuaClass高度重视数据安全，采用银行级别的加密技术保护客户信息。系统符合相关数据保护法规要求，并定期进行安全审计和备份。',
        icon: 'mdi-shield-lock'
    },
    {
        question: '是否提供系统培训？',
        answer: '是的，我们为所有用户提供全面的系统培训。包括线上视频教程、操作手册和定期的在线培训课程。企业版客户还享有专属的现场培训服务。',
        icon: 'mdi-school'
    },
    {
        question: '如何获取技术支持？',
        answer: '您可以通过系统内的帮助中心提交工单，或直接联系我们的客服热线1300 424 666。专业版和企业版客户享有优先响应服务。',
        icon: 'mdi-headset'
    }
];

// 控制FAQ的展开/收起
const expandedFaq = ref<number | null>(null);
const toggleFaq = (index: number): void => {
    expandedFaq.value = expandedFaq.value === index ? null : index;
};
</script>

<template>
    <div id="help" class="faq-section pt-sm-14 pt-10 pb-sm-16 pb-10">
        <v-container>
            <div class="maxWidth">
                <div class="text-center mb-14" data-aos="fade-up">
                    <h2 class="text-h3 font-weight-bold mb-4">常见问题解答</h2>
                    <div class="text-subtitle-1 text-medium-emphasis max-w-500 mx-auto">
                        以下是用户经常提出的问题，如果您有其他疑问，请随时联系我们
                    </div>
                </div>

                <v-row class="justify-center mb-10">
                    <v-col cols="12" lg="8" sm="10">
                        <div class="faq-container">
                            <div v-for="(faq, index) in faqs" :key="index"
                                :data-aos="index % 2 === 0 ? 'fade-right' : 'fade-left'" :data-aos-delay="index * 100"
                                class="faq-item mb-5">
                                <v-card :class="{ 'faq-active': expandedFaq === index }" class="faq-card" elevation="3"
                                    @click="toggleFaq(index)">
                                    <v-card-item>
                                        <div class="d-flex align-center">
                                            <v-avatar :color="expandedFaq === index ? 'primary' : 'grey-lighten-3'"
                                                class="mr-4 transition-fast-in-fast-out" size="48">
                                                <v-icon :color="expandedFaq === index ? 'white' : 'primary'"
                                                    :icon="faq.icon" size="24"></v-icon>
                                            </v-avatar>

                                            <div class="flex-grow-1">
                                                <h3 class="text-h6 font-weight-bold">{{ faq.question }}</h3>
                                                <v-expand-transition>
                                                    <div v-if="expandedFaq === index" class="pt-4 pb-2">
                                                        <div class="answer-text">{{ faq.answer }}</div>
                                                    </div>
                                                </v-expand-transition>
                                            </div>

                                            <v-icon :color="expandedFaq === index ? 'primary' : 'grey'"
                                                :icon="expandedFaq === index ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                                                class="transition-fast-in-fast-out" size="24"></v-icon>
                                        </div>
                                    </v-card-item>
                                </v-card>
                            </div>
                        </div>
                    </v-col>
                </v-row>

                <v-row class="justify-center">
                    <v-col cols="12" lg="6" sm="10">
                        <v-card data-aos="zoom-in" data-aos-delay="300" elevation="10">
                            <div class="contact-card text-center px-sm-6 px-4 py-sm-10 py-6">
                                <h3 class="text-h3 mb-4">还有其他问题？</h3>
                                <p class="text-body-1 mb-8">与我们联系，获取专业支持</p>
                                <div class="d-sm-flex justify-center gap-4">
                                    <v-btn class="m-btn-full px-6" color="primary" elevation="3" href="tel:1234567890"
                                        prepend-icon="mdi-phone" rounded="pill" size="large">
                                        电话咨询
                                    </v-btn>
                                    <v-btn class="m-btn-full mt-sm-0 mt-4 px-6" color="secondary"
                                        href="mailto:support@GuaClass.com" prepend-icon="mdi-email" rounded="pill"
                                        size="large" variant="outlined">
                                        发送邮件
                                    </v-btn>
                                </div>
                            </div>
                        </v-card>
                    </v-col>
                </v-row>
            </div>
        </v-container>
    </div>
</template>

<style scoped>
.max-w-500 {
    max-width: 500px;
}

.faq-container {
    overflow: hidden;
}

.faq-card {
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.faq-active {
    border-left: 4px solid var(--v-primary-base);
}

.answer-text {
    color: var(--v-medium-emphasis-base);
    font-size: 16px;
    line-height: 1.6;
    border-left: 3px solid var(--v-primary-base);
    padding-left: 16px;
    margin-left: 8px;
}

.contact-card {
    border-radius: 16px;
    background: linear-gradient(135deg, #f5f7fa 0%, #eef2f5 100%);
}

.m-btn-full {
    min-width: 180px;
}

.transition-fast-in-fast-out {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 600px) {
    .faq-active {
        border-left: 3px solid var(--v-primary-base);
    }
}
</style>
